<template>
    <div class="main">
      <div class="banner">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="item in moreimg">
              <img :src=url+item alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="nurse">
        <div class="left">
          <h3>{{name}}</h3>
          <p v-if="min_price>=1">最低: ¥ {{parseInt(min_price)}}</p>
          <p v-if="min_price<1">最低: ¥ {{min_price}}</p>
          <del v-if="show_price>=1">¥{{parseInt(show_price)}}</del>
          <del v-if="show_price<1">¥{{show_price}}</del>
        </div>
      </div>
      <tuanbottom :describe='describe' :play_title='play_title' :play_desc="play_desc"></tuanbottom>
      <div class="foot">
        <p v-if="real_price>=1">当前价 <span>￥{{parseInt(real_price)}}</span></p>
        <p v-if="real_price<1">当前价 <span>￥{{real_price}}</span></p>
        <a @click="beforeRequest()">我要开团</a>
      </div>
      <div class="gohome">
        <a :href="myUrl+'?zzypropid=1'">
          <i class="iconfont">&#xe634;</i>
          <p>首页</p>
        </a>
      </div>
      <div class="prop" v-show="isShow">
        <div class="propcon">
          <p v-if="num==0" :class="{marTop1:num==0}">{{message}}</p>
          <p v-if="num==1" :class="{marTop0:num==1}" v-html="successWord">{{successWord}}</p>
          <p v-if="num==2" :class="{width:num==2}" v-html="message">{{message}}</p>
          <p v-if="num==4" :class="{marTop0:num==4}">{{busymessage}}</p>
          <a :href="myUrl+'/'" v-if="num ==0">返回首页</a>
          <a :href="myUrl+'/availableshop'" v-if="num ==2">查看我的拼团</a>
          <a v-if="num ==4" :class="{mar:num==4}" @click="lastreload(),isShow=false">确定</a>
          <div :class="{dingwei:num==1}"><span class="" @click="isShow = false" :class="{active:num==0,active1:num==2}">×</span></div>
        </div>
        <img src="../../img/up.png" alt="" v-if="num==1">
      </div>
      <div class="ydprop" v-show="onShow">
        <div class="propcon">
          <p v-if="accountType == 1" :class="{marTop4:accountType == 1}">代言人刘涛邀您来开团，分享成团后可获专属红包</p>
          <p v-if="accountType == 2" :class="{marTop3:accountType == 2}">快来开团，体验刘涛同款护理，分享好友获得更多优惠哦!</p>
          <p v-if="accountType == 3" :class="{marTop5:accountType == 3}">代言人刘涛邀您来开团，快点分享给更多好友吧!</p>
          <div><span class="" @click="onShow = false" :class="{active:num==0,active1:num==2}">×</span></div>
        </div>
        <img src="../../img/down-shouye.png" alt="">
      </div>
      <div class="upshow" v-if="upshow==true">
        <div class="upcon" >
          <h3>请确认信息</h3>
          <p v-if="accountType==1">姓名: {{user_name}}(会员)</p>
          <p v-if="accountType==2">姓名: {{user_name}}(注册用户)</p>
          <p v-if="accountType==3">姓名: {{user_name}}(员工)</p>
          <p>电话: {{user_phone}}</p>
          <div>
            <a @click="request()">确认</a>
            <a :href="myUrl+'/'">否</a>
          </div>
        </div>
      </div>
      <judge :judgeNum="judgeNum"></judge>
      <PulseLoader v-if="loading==true"  :size="size" :color="color"></PulseLoader>
    </div>
</template>

<script>

  import $ from "jQuery";
  import "../../static/swiper.min.css"
  import Swiper from 'swiper';
  import tuantop from "./tuantop.vue";
  import tuannurse from "./tuannurse.vue";
  import tuanbottom from "./tuanbottom.vue";
  import judge from "./judge.vue";
  import PulseLoader from 'vue-spinner/src/PulseLoader.vue';
  import wx from 'weixin-js-sdk';
  import {
    baseUrl,
    myUrl,
    auth,
  } from "@/assets/public";
    export default {
        name: 'main',
        data () {
            return {
              busymessage:"",
              isShow:false,
              url:"",
              moreimg:"",
              name:"",
              real_price:"",
              show_price:"",
              endtime:"",
              play_title:"",
              play_desc:"",
              describe:"",
              progress:"",
              id:"",
              message:"",
              num:1,
              accountType:"",
              reurl:"",
              loading:true,
              size:".5rem",
              color:"#333",
              shareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
              lineLink:"",
              imgUrls:myUrl+"/static/img/shzhensh are.png",
              descContent:"越“拼”越实惠，越“拼”价越低",
              appShareTitle:"我已参加美丽田园爱拼才美丽，就差你了！一起体验涛姐最爱护理!",
              exitsOpen:"",
              min_price:"",
              onShow:false,
              successWord:"",
              open_first:"",
              group_id:"",
              next_refund:"",
              judgeNum:0,
              open_id:"",
              user_name:"",
              user_phone:"",
              upshow:false,
			  myUrl:myUrl,
            }
        },
        created(){
          auth();
        },
        mounted(){
          this.url = baseUrl;
          var that =this;
          var id = this.$route.query.id;
          this.id=id;
          var that = this;

          //请求基本数据
          $.ajax({
            type:"GET",
            url: baseUrl+"/api/groupNoInfo/"+id,
            data:{
              "openid": localStorage.openid
            },
            dataType:"json",
            success:function (res) {
              if (res.status == 200){
                that.des = res.data.describe;
                that.group_id=res.data.group_id;
                that.moreimg =res.data.more_img;
                that.name=res.data.name;
                that.real_price=res.data.real_price;
                that.show_price=res.data.show_price;
                that.endtime=res.data.endtime;
                that.describe=res.data.describe;
                that.progress=res.data.progress;
                that.play_title=res.data.play_title;
                that.play_desc=res.data.play_desc;
                that.accountType=res.data.accountType;
                that.min_price=res.data.min_price;
                that.exitsOpen=res.data.exits_openid;
                that.open_first=res.data.open_first;
                that.next_refund=res.data.next_refund;
                that.user_name=res.data.user_name;
                that.user_phone=res.data.user_phone;
                that.onShow = true;
                if(that.open_first= 0 && that.accountType ==2) {
                  that.onShow = true;
                }else {
                  that.onShow = false;
                }
                that.lineLink =window.location.href;

//                console.log(that.exitsOpen);
//                if(that.exitsOpen<=0){
//                  that.lineLink =window.location.href;
//                }else{
//                  that.lineLink =myUrl+"/cantuan?id="+that.exitsOpen;
//                }
                that.wechatShare();

                that.loading=false;
              }else if(res.status == -200) {
                that.$router.push({path:myUrl+"/notfound"});
              }
            }
          })

          //banner轮播
          this.$nextTick(function () {
            var swiper = new Swiper('.swiper-container', {
              pagination: '.swiper-pagination',
              paginationClickable: true,
              spaceBetween: 30,
              autoplay: 3000,
              observer:true,
              observeParents:true,//修改swiper的父元素时，自动初始化swiper
            });
          });
        },
        methods: {
		  //开团前获取用户信息
		  beforeRequest(){
		    var that = this;
		    if(that.user_name || that.user_phone){
			  that.upshow=true;
			}else{
			  that.judgeNum =1;
			}
		  },
		
          //点击开团
          request(){
            var that = this;
			that.upshow=false;
              $.ajax({
                data:{
                  "openid": localStorage.openid
                },
                type:"POST",
                url: baseUrl+"/api/openGroup/"+that.id,
                dataType:"json",
                success:function (res) {
                  if(res.status==200){
                    that.isShow=true;
                    that.num=1; //返回200不用付钱
                    $.ajax({
                      url:baseUrl+"/api/exitsOpenId/"+that.id,
                      data:{
                        "openid": localStorage.openid
                      },
                      dataType:"json",
                      success:function (res) {
                        if(res.status==200){
                          //会员开团后,可分享(此处修改分享链接)
                          that.lineLink =myUrl+"/cantuan?id="+res.data;
                          that.wechatShare();
                        }
                      }
                    });
                    that.accountType=res.data.accountType;
                    if(that.accountType==1){
                      that.successWord="开团成功!分享好友,<br>成团后即可领取红包!"
                    }else if(that.accountType==2){
                      that.successWord="开团成功!<br>邀请好友一同参团<br>下一位好友成功购买<br>即可获得"+that.next_refund+"元返现"
                    }else if(that.accountType==3){
                      that.successWord="开团成功!<br>赶快分享给更多好友吧!"
                    }
                  }else if(res.status==-200){
                    that.isShow=true;
                    that.num=0;
                    that.message=res.message;
                  }else if(res.status==-221){
                    that.isShow=true;
                    that.num=2;
                    that.message=res.message;
                  }else if(res.status==220){
                    //返回220前去支付
                    that.accountType=res.data.accountType;
                    that.open_id=res.data.open_id;
                    that.callpay($.parseJSON(res.data.jsApiParameters));
                  }else if(res.status==-300){
                    $.ajax({
                      url:baseUrl+"/api/checkUser",
                      type:"GET",
                      dataType:"json",
                      data:{'openid':localStorage.openid,'access_token':localStorage.access_token,'randstr':localStorage.randstr},
                      success:function (res) {
                        if(res.status==200){
                          that.request();
                        }else if(res.status==300){
                            that.judgeNum =1;
                        }else if(res.status==-300){
                            that.isShow=true;
                            that.num=4;
                            that.busymessage=res.data.message;
                        }
                      }
                    })
                  }
                }
              })

          },
          //微信支付-1
          jsApiCall(jsApiParameters){
            var that = this;
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', jsApiParameters,
                function(res){
                  WeixinJSBridge.log(res.err_msg);
                    //alert(res.err_code+res.err_desc+res.err_msg);
                  if(res.err_msg == "get_brand_wcpay_request:ok"){
                          that.lineLink =myUrl+"/cantuan?id="+that.open_id;
                          that.wechatShare();
                          that.isShow=true;
                          that.num=1;
                          if(that.accountType==1){
                            that.successWord="开团成功!分享好友,<br>成团后即可领取红包!"
                          }else if(that.accountType==2){
                            that.successWord="开团成功!<br>邀请好友一同参团<br>下一位好友成功购买<br>即可获得"+that.next_refund+"元返现"
                          }else if(that.accountType==3){
                            that.successWord="开团成功!<br>赶快分享给更多好友吧!"
                          }
                  }
                }
              );
            },
          //微信支付-2
          callpay(jsApiParameters) {
            var that = this;
            if (typeof WeixinJSBridge == "undefined") {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', jsApiCall);
                document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
              }
            } else {
              that.jsApiCall(jsApiParameters);
            }
          },
          //微信分享
          wechatShare(){
          let that = this;
          wx.ready(function (){
            wx.onMenuShareTimeline({
              title: that.shareTitle, // 分享标题
              link: that.lineLink, // 分享链接
              imgUrl: that.imgUrls, // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数

              },
              cancel: function () {}
            });
            wx.onMenuShareAppMessage({
              title: that.appShareTitle, // 分享标题
              desc: that.descContent, // 分享描述
              link: that.lineLink, // 分享链接
              imgUrl: that.imgUrls, // 分享图标
              type: 'link', // 分享类型,music、video或link，不填默认为link
              dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
              success: function () {

              },
              cancel: function () {}
            });
            wx.onMenuShareQQ({
              title: that.shareTitle, // 分享标题
              desc: that.descContent, // 分享描述
              link: that.lineLink, // 分享链接
              imgUrl: that.imgUrls, // 分享图标
              success: function () {
                // 用户确认分享后执行的回调函数

              },
              cancel: function () {}
            });
            wx.onMenuShareWeibo({
              title: that.shareTitle, // 分享标题
              desc: that.descContent, // 分享描述
              link: that.lineLink, // 分享链接
              imgUrl: that.imgUrls, // 分享图标
              success: function () {
                // 用户取消分享后执行的回调函数

              },
              cancel: function () {}
            });
            wx.onMenuShareQZone({
              title: that.shareTitle, // 分享标题
              desc: that.descContent, // 分享描述
              link: that.lineLink, // 分享链接
              imgUrl: that.imgUrls, // 分享图标
              success: function () {
                // 用户取消分享后执行的回调函数

              },
              cancel: function () {}
            });
          })
        },
          //点确定刷新页面
          lastreload(){
            window.location.reload();
          }
        },
        components:{
          tuantop,tuannurse,tuanbottom,PulseLoader,judge,
        }
    }
</script>

<style scoped>
  @import "../../static/font_880fex1d3q6c4n29/iconfont.css";
  .upshow {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .upshow .upcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    overflow: hidden;
  }
  .upshow .upcon h3 {
    width: 60%;
    margin:0 auto 0.2rem;
    text-align: center;
    margin-top:4rem;
    font-size: 0.37rem;
  }
  .upshow .upcon p {
    width: 51%;
    margin:0.2rem auto 0;
    font-size:.32rem;
    margin-top:.3rem;
    overflow: hidden;
	font-size: 0.4rem;
  }
  .upshow .upcon p:nth-child(2) {
    margin-top:.6rem;
  }
  .upshow .upcon div {
    width: 60%;
    margin:0 auto;
    margin-top:.6rem;
    display: flex;
  }
  .upshow .upcon div a {
    width: 50%;
    height:.6rem;
    text-align: center;
    line-height:.6rem;
    background: #666666;
    color: #ffffff;
  }
  .mar {
    margin-top:1.5rem !important;
  }
  .gohome {
    width: 1.5rem;
    height:1.5rem;
    position: fixed;
    bottom:2rem;
    right:0;
    background: rgba(76,76,76,.5);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    margin-right:.5rem;
  }
  .gohome a {
    width: 2rem;
    height:1.4rem;
    text-align: center;
  }
  .gohome a i {
    display: block;
    font-size:.6rem;
    margin-top:.2rem;
    color: #ffffff;
  }
  .gohome a p {
    font-size:.32rem;
    color: #ffffff;
  }
  .banner {
    width: 100%;
    height:auto;
  }
  .banner .swiper-container {
    width: 100%;
    height: auto;
    margin: 0 auto;
  }
  .banner .swiper-container .swiper-slide {
    text-align: center;
    font-size: .4rem;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
  .banner .swiper-container .swiper-slide img {
    width:100%;
    height:auto;
  }
  .nurse {
    width: 90%;
    height:1.6rem;
    border-bottom:1px solid #dddddd;
    margin:0 auto;
    padding:.2rem;
    display: flex;
  }
  .nurse .left {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    padding-left:.3rem;
  }
  .nurse .left h3 {
    width: 100%;
    font-size:.5rem;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space:nowrap;
  }
  .nurse .left p {
    font-size:.48rem;
    color: #ff5454;
    margin-top:.2rem;
    vertical-align: bottom;
  }
  .nurse .left del{
    font-size:.36rem;
    color: #999;
    margin-top:.2rem;
    margin-left:.2rem;
  }
  .nurse .right {
    width: 32%;
    display: flex;
    flex-wrap: wrap;
    padding:.2rem .2rem;
    justify-content: center;
    align-items: center;
  }
  .foot {
    width: 80%;
    padding:0 10%;
    height: 1.5rem;
    border-top:1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content:space-between;
    position: fixed;
    bottom:0;
    left:0;
    background: #ffffff;
  }
  .foot p {
    font-size:.4rem;
  }
  .foot p span {
    color: #ff5454;
  }
  .foot a {
    display: block;
    width: 4rem;
    text-align: center;
    height:1rem;
    line-height:1rem;
    background: #000;
    color: #ffffff;
    letter-spacing: 2px;
    font-size:.4rem;
  }
  .prop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .prop .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .prop>img {
    position: absolute;
    top:5%;
    right:13%;
  }
  .prop .propcon p {
    width: 100%;
    padding:0 20%;
    height:auto;
    text-align: center;
    margin-top:3.5rem;
    font-size:.38rem;
    line-height:.6rem;
  }
  .width {
    width:65% !important;
  }
  .marTop {
    margin-top:5.5rem !important;
  }
  .marTop2 {
    margin-top:5.5rem !important;
  }
  .prop .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    /*margin-bottom:2rem;*/
  }
  .prop .propcon div {
    width: 100%;
    text-align: center;
  }
  .prop .propcon span {
    font-size:.8rem;
    color: #666;
  }
  .active {
    position: relative;
    top:.8rem;
  }
  .active1 {
    position: relative;
    top:-.2rem;
  }
  .dingwei {
    position: absolute;
    bottom:.7rem;
    left:0;
  }
  .v-spinner {
    position: fixed;
    top:0;
    width: 100%;
    height: 100vh;
    z-index: 100;
    background: #fff;
    display: flex;
    flex: 0 1 auto;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }

  .ydprop {
    width: 100%;
    height: 100vh;
    background: rgba(76,76,76,.7);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999999;
  }
  .ydprop .propcon {
    width: 80%;
    padding:0 10%;
    height:10rem;
    margin:0 auto;
    margin-top:2rem;
    background: url("../../img/prop.png") center center no-repeat;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }
  .ydprop>img {
    position: absolute;
    right:25%;
    bottom:27%;
  }
  .ydprop .propcon p {
    width: 100%;
    padding:0 28%;
    height:auto;
    text-align: center;
    margin-top:4.3rem;
    font-size:.38rem;
    line-height:.6rem;
  }
  .width {
    width:65% !important;
  }
  .marTop0 {
    margin-top:0rem !important;
  }
  .marTop1 {
    margin-top:5.5rem !important;
  }
  .marTop2 {
    margin-top:5.5rem !important;
  }
  .marTop3 {
    margin-top:4.5rem !important;
  }
  /*.marTop4 {*/
    /*margin-top:4.3rem !important;*/
  /*}*/
  /*.marTop5 {*/
    /*margin-top:4.3rem !important;*/
  /*}*/
  .ydprop .propcon a {
    display: block;
    width: 3rem;
    height: 1rem;
    line-height: 1rem;
    text-align: center;
    border:1px solid #000;
    /*margin-bottom:2rem;*/
  }
  .ydprop .propcon div {
    width: 100%;
    text-align: center;

  }
  .ydprop .propcon span {
    font-size:.8rem;
    color: #666;
  }
</style>
